<template> 
  <div class="text-xl">【近一周访问量】</div>
  <div ref="target" class="w-full h-72 pb-10"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';
import { getArticlePVStatisticsInfo } from '@/api/admin/dashboard'

// 近一周文章 PV 数据
const articlePVInfo = ref({})
const getArticlePVInfo = async () => {
  const res = await getArticlePVStatisticsInfo()
  if (res.success) {
    articlePVInfo.value = res.data
  }
}
getArticlePVInfo()

const target = ref(null)
let myChart = null

onMounted(() => {
  myChart = echarts.init(target.value)
  init()
})

function init() {
  // 从props.value中获取日期集合和pv访问量集合
  let pvDates = articlePVInfo.value.pvDates
  let pvCounts = articlePVInfo.value.pvCounts

  let option = {
    grid: {  
        left: '3%',  
        right: '4%',  
        bottom: '3%',  
        containLabel: true  
    },
    xAxis: {
      type: 'category',
      data: pvDates,
      axisLabel: {
        // 坐标轴刻度标签的相关设置
        show: true,
        color: '#CFD4EB',
        fontSize: 15 // 让字zhi体变大dao
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        // 坐标轴刻度标签的相关设置
        show: true,
        color: '#CFD4EB',
        fontSize: 16 // 让字体变大
      },
      splitLine: {
        //网格线
        lineStyle: {
          color: '#fff'
        }
      }
    },
    series: [
      {
        symbol: 'circle',
        symbolSize: 10, // 折线点的大小
        color: '#FFD04B', // 折线点的颜色
        data: pvCounts,
        type: 'line',
        lineStyle:{//折线的样式
          color:"#09b0d8",
          width: 4
        }
      }
    ]
  };
  myChart.setOption(option);
}

watch(() => articlePVInfo.value, () => init(), {deep: true})
</script>
<style scoped>

</style>